<template>
  <div>
    <Nav></Nav>
    <!--头部-->
    <div class="head">
      <div class="header-cont">
        <img class="logo" src="../../../static/login/logo.png" />
        <span>{{title}}</span>
      </div>
    </div>

    <div class="con">
      <div class="login-wrap">
        <!--登录页面-->
        <div class="login">
          <h3>
            <span>登录</span>
            <span>手机验证登录<img src="../../../static/login/iphone.png" alt=""></span>
          </h3>
          <div class="iphoneCode">
            <input class="inp" @blur="yzIphone()" v-model="iphone"  type="text" placeholder="请输入手机号">
            <img v-if="iphoneTrue" src="../../../static/login/check .png" height="12" width="12"/>
          </div>
          <p class="false">
            <span v-if="bol"><img src="../../../static/login/alert.png" alt="">手机号码不正确,请重新输入</span>
          </p>
          <input class="inp" v-model="password" type="password" placeholder="密码">
          <div class="clearfix yzm">
            <input class="inp-yzm" v-model="code" type="text" placeholder="验证码">
            <Code class="code" ref="zi"></Code>
          </div>

          <div class="zi-dl" >
            <span class="xuan-k" @click="show()"><img v-if="showimg" src="../../../static/login/dui.png" alt=""></span>自动登录
            <router-link to="/respassword">
              <a>忘记密码?</a>
            </router-link>
          </div>

          <div class="butt">
            <button class="btn1" @click="login()">登录</button>
            <router-link to="/reg">
              <button class="btn2">会员注册</button>
            </router-link>
          </div>
          <h4>提示：未注册用户将直接注册成为礼拜五用户</h4>
          <div class="bot">
            <span>用合作网站登录</span>
          </div>
          <div class="bot-img" >
            <img src="../../../static/login/qq.png" />
            <img src="../../../static/login/weixin.png" />
          </div>
        </div>

      </div>




    </div>
    <Footer></Footer>

  </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Footer from '../com/Footer'
  import Code from '../com/Code'
  import axios from 'axios'
    export default {
      name: "Login",
      data(){
          return{
            title:'会员登录',
            iphone:'',
            password:'',
            code:'',
            iphoneTrue:false,
            bol:false,
            showimg:false
          }
      },
      components:{
        Nav,
        Code,
        Footer
      },
      methods:{
        yzIphone(){
          var reg=/^1[34578]\d{9}$/;
          if(!reg.test(this.iphone)){
            this.bol=true;
            this.iphoneTrue=false;
            // this.iphone='';
            return false;
          }else{
            this.bol=false;
            this.iphoneTrue=true;
          }
        },
        show(){
          this.showimg=!this.showimg;
        },
        login(){
          if(this.iphone.trim()==''){
            alert('手机号不能为空');
            return false;
          }
          if(this.password.trim()==''){
            alert('密码不能为空');
            return false;
          }
          if(this.code.trim()==''){
            alert('验证码不能为空');
            return false;
          }
          if(this.code != this.$refs.zi.str2){
            alert('验证码不正确,请重新输入')
            this.$refs.zi.changeImg();
            this.code='';
            return false;
          }else{
            var params=new URLSearchParams();
            params.append('iphone',this.iphone);
            params.append('pwd',this.password);

            axios.post('/api/firday/login.php',params).then(res=>{
              console.log(res.data);
              if(res.data.code ==1){
                this.$router.push({path:'/'});
                this.$store.commit('showIphone',this.iphone);
                this.$store.commit('showPhone',this.iphone);

                this.iphone='';
                this. password='';
                this.code='';
                this.$refs.zi.changeImg();
                this.iphoneTrue=false;

              }else{
                alert(res.data.msg);
                this.iphone='';
                this. password='';
                this.code='';
                this.$refs.zi.changeImg();
                this.iphoneTrue=false;
              }
            });
          }

        }
      },
      mounted(){

      }
    }

</script>

<style scoped>
  .head{
    width: 100%;
    height: 90px;
    padding-top: 40px;
  }
  .header-cont{
    width: 1280px;
    height: 50px;
    margin: 0 auto;
  }
  .header-cont img{
    width: 380px;
    height: 50px;
    margin-right: 100px;
    vertical-align: bottom;
  }
  .header-cont span{
    position: relative;
    font-size: 20px;
    color: #8c8c8c;
    height: 50px;
    line-height: 50px;
    position: relative;
  }
  .header-cont span:before{
    position: absolute;
    left: -50px;
    top: -6px;
    content: '';
    border: 1px solid #cecece;
    height: 38px;
    background: #cecece;
  }



  .con{
    width: 100%;
    height: 500px;
    background: url("../../../static/login/logreg.png") no-repeat center/cover ;
  }
  .login-wrap{
    width: 1280px;
    height: 100%;
    margin: 0 auto;
  }

  .login{
    width: 310px;
    height: 478px;
    padding: 10px 40px;
    background: #fff;
    float: right;
    border: 1px solid #cecece;
  }

  .login h3{
    width: 100%;
    height: 60px;
    line-height: 60px;
  }
  .login h3 span:first-child{
    float: left;
    font-size: 24px;
    color: #666666;
  }
  .login h3 span:last-child{
    float: right;
    font-size: 16px;
    color: #498e3d;
  }
  .login h3 span:last-child img{
    width: 12px;
    height: 16px;
    margin-left: 5px;
    vertical-align: middle;
  }
  .iphoneCode{
    position: relative;
    width: 305px;
    height: 40px;
  }
  .iphoneCode img{
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .inp{
    width: 281px;
    height: 16px;
    border: 1px solid #d3d3d3;
    padding:12px;
    font-size: 16px;
    background: #f9f9f9;
  }
  .false{
    width: 305px;
    height: 30px;
    line-height: 30px;
  }
  .false span{
    color: #db2630;
  }
  .false span>img{
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: middle;
  }
  .yzm{
    display: flex;
    justify-content: space-between;
    width: 305px;
    height: 44px;
    padding-top: 30px;
  }

  .inp-yzm{
    width: 60px;
    height: 16px;
    padding:12px;
    border: 1px solid #d3d3d3;
    font-size: 16px;
    background: #f9f9f9;
    float: left;
  }
  .code{
    float: right;
    height: 40px;
  }

  .zi-dl{
    width: 305px;
    height: 10px;
    padding: 22px 0;
  }
  .xuan-k{
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #d3d3d3;
    margin-right: 10px;
    cursor: pointer;
  }
  .xuan-k img{
    width: 8px;
    height: 8px;
    vertical-align: top;
    font-size: 0;
  }

  .zi-dl a{
    float: right;
    color: #f08200;
    border-bottom: 1px solid #f08200;
    cursor: pointer;
  }
  button{
    width: 134px;
    height: 50px;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
  }

  .butt{
    width: 305px;
    height: 44px;
    margin-bottom: 15px;
  }
  .btn1{
    background: #f08200;
    float: left;
    cursor: pointer;
  }
  .btn2{
    background: #498e3d;
    float: right;
    cursor: pointer;
  }
  .login h4{
    font-size: 14px;
    color: #999999;
  }
  .bot{
    width: 305px;
    height: 20px;
    padding: 15px 0;
    text-align: center;
  }
  .bot span{
    display: inline-block;
    width: 128px;
    font-size: 16px;
    color: #707070;
  }
  .bot-img{
    width: 305px;
    height: 42px;
    text-align: center;
  }
  .bot-img img:first-child{
    margin-right: 20px;
  }
  </style>
